(() => {
  /*
    todomvc:待办事项 3次
      * 渲染列表 ok
      * 新增任务 ok
      * 删除任务 ok
      * 完成任务 ok
      * 编辑任务 ok
      * 过滤 已完成/未完成/所有的任务 ok 哈希改变，改变页面部分内容-单页面应用的原理 
      * 统计未完成的条数 ok
      * 清空所有已完成 ok
      * 本地数据存储 ok
      * 如果没有数据隐藏下拉框 ok
      * 自动聚焦 
      * 全选和反选 ok
  */

  let key = "todoMvclist";
  let storage = {
    set(val) {
      //存数据
      localStorage.setItem(key, JSON.stringify(val));
    },
    get() {
      return JSON.parse(localStorage.getItem(key)) || [];
    },
  };

  // let taskList = [
  //   {
  //     id: 1,
  //     title: "今天吃桂林米粉",
  //     checked: false,
  //   },
  //   {
  //     id: 2,
  //     title: "今天完成todomcv",
  //     checked: false,
  //   },
  //   {
  //     id: 3,
  //     title: "今天完成多商铺购物车",
  //     checked: false,
  //   },
  // ];

  // storage.set(taskList);
  // console.log(storage.get(), 9090);

  let vm = new Vue({
    el: "#app",
    data: {
      taskList: storage.get(),
      msg: "", //输入的新任务
      currentIndex: null,
      status: "", //提前声明该变量，后期哈希值改变的时候就会监听得到
    },

    methods: {
      //功能：添加新任务
      addItem() {
        // console.log("添加数据" + this.msg);
        if (this.msg.trim()) {
          let obj = {
            id: new Date().getTime(),
            title: this.msg,
            checked: false,
          };
          this.taskList.push(obj);
          this.msg = "";
        }
      },

      //功能：删除某一条数据
      removeItem(index) {
        console.log(index);
        let issure = confirm("您确定要删除我吗?");
        if (issure) {
          this.taskList.splice(index, 1);
        }
      },

      //功能：取消编辑
      cancelEdit(index) {
        if (!this.taskList[index].title.trim()) {
          //字符串为空
          this.taskList.splice(index, 1);
        }

        this.currentIndex = null;
      },

      //功能：清空所有已完成
      removeAll() {
        this.taskList = this.taskList.filter((item) => item.checked == false); //filter返回新数组，不会改变原数组
      },
    },

    //计算属性
    computed: {
      //功能：全选和反选
      allcheck: {
        get() {
          return this.taskList.every((item) => item.checked == true);
        },
        set(val) {
          this.taskList.forEach((item) => {
            item.checked = val;
          });
        },
      },

      //功能：统计未完成条数
      total() {
        return this.taskList.filter((item) => item.checked == false).length;
      },

      //功能：监听到status的变化
      filterData() {
        console.log(this.status, 999);
        if (this.status == "") {
          console.log("全部数据");
          return this.taskList;
        } else if (this.status == "active") {
          console.log("未完成");
          return this.taskList.filter((item) => item.checked == false);
        } else if (this.status == "completed") {
          console.log("已完成");
          return this.taskList.filter((item) => item.checked == true);
        }
      },
    },

    watch: {
      //浅度监听：只能监听解构简单，数据简单的熟悉
      // status(newval) {
      //   console.log(newval, "变了");
      // },
      //深度监听
      taskList: {
        deep: true,
        handler(newval) {
          //只要数据有变化就重新存入本地存储
          storage.set(newval);
        },
      },
    },

    //自定义指令
    directives: {
      focus1: {
        inserted(el) {
          el.focus();
        },
      },
      focus2: {
        update(el) {
          el.focus();
        },
      },
    },
  });

  // console.log(vm);
  // vm.test = "666";

  window.onhashchange = function () {
    //当哈希改变的时候就触发这里的功能
    // console.log(location.hash.slice(2)); // #/
    vm.status = location.hash.slice(2);
    console.log(vm);
  };

  window.onhashchange(); //进入页面就触发
})();
